<template>
	<view>
		<van-tabs v-model:active="active" title-active-color="#fe9b23" color="#fe9b23">
			<van-tab title="待送养">
				<view class="item" v-for="v in waite" @click="info(v.petId)">
					<img :src="v.petImg" class="bigimg">
					<view class="right">
						<view class="top">
							<text class="name">{{v.petName}}</text>
							<img :src="`../../static/${v.petSex?'man':'woman'}.png`" class="seximg">
							<text class="age">{{v.petAge}}</text>
						</view>
						<view class="middle">
							<text>{{v.petDescr}}</text>
						</view>
						<view class="bottom">
							<van-tag :color="v.petSterilization?'#Fe9b23':'#f7f7f7'"
								:text-color="v.petSterilization?'#f7f7f7':'#000000'">{{v.petSterilization==1?'已绝育':'未绝育'}}</van-tag>
							<van-tag :color="v.petInisect?'#Fe9b23':'#f7f7f7'"
								:text-color="v.petInisect?'#f7f7f7':'#000000'">{{v.petInisect==1?'已驱虫':'未驱虫'}}</van-tag>
							<van-tag :color="v.petVaccine?'#Fe9b23':'#f7f7f7'"
								:text-color="v.petVaccine?'#f7f7f7':'#000000'">{{v.petVaccine==1?'已免疫':'未免疫'}}</van-tag>
						</view>
					</view>
				</view>
				<van-empty description="此处空空如也哦!" v-if="!waite.length" />
			</van-tab>
			<van-tab title="已送养">
				<view class="item" v-for="v in finish" @click="info(v.petId)">
					<img :src="v.petImg" class="bigimg">
					<view class="right">
						<view class="top">
							<text class="name">{{v.petName}}</text>
							<img :src="`../../static/${v.petSex?'man':'woman'}.png`" class="seximg">
							<text class="age">{{v.petAge}}</text>
						</view>
						<view class="middle">
							<text>{{v.petDescr}}</text>
						</view>
						<view class="bottom">
							<van-tag :color="v.petSterilization?'#Fe9b23':'#f7f7f7'"
								:text-color="v.petSterilization?'#f7f7f7':'#000000'">{{v.petSterilization==1?'已绝育':'未绝育'}}</van-tag>
							<van-tag :color="v.petInisect?'#Fe9b23':'#f7f7f7'"
								:text-color="v.petInisect?'#f7f7f7':'#000000'">{{v.petInisect==1?'已驱虫':'未驱虫'}}</van-tag>
							<van-tag :color="v.petVaccine?'#Fe9b23':'#f7f7f7'"
								:text-color="v.petVaccine?'#f7f7f7':'#000000'">{{v.petVaccine==1?'已免疫':'未免疫'}}</van-tag>
						</view>
					</view>
				</view>
				<van-empty description="此处空空如也哦!" v-if="!finish.length" />
			</van-tab>
			<van-tab title="已下线">
				<view class="item" v-for="v in outline" @click="info(v.petId)">
					<img :src="v.petImg" class="bigimg">
					<view class="right">
						<view class="top">
							<text class="name">{{v.petName}}</text>
							<img :src="`../../static/${v.petSex?'man':'woman'}.png`" class="seximg">
							<text class="age">{{v.petAge}}</text>
						</view>
						<view class="middle">
							<text>{{v.petDescr}}</text>
						</view>
						<view class="bottom">
							<van-tag :color="v.petSterilization?'#Fe9b23':'#f7f7f7'"
								:text-color="v.petSterilization?'#f7f7f7':'#000000'">{{v.petSterilization==1?'已绝育':'未绝育'}}</van-tag>
							<van-tag :color="v.petInisect?'#Fe9b23':'#f7f7f7'"
								:text-color="v.petInisect?'#f7f7f7':'#000000'">{{v.petInisect==1?'已驱虫':'未驱虫'}}</van-tag>
							<van-tag :color="v.petVaccine?'#Fe9b23':'#f7f7f7'"
								:text-color="v.petVaccine?'#f7f7f7':'#000000'">{{v.petVaccine==1?'已免疫':'未免疫'}}</van-tag>
						</view>
					</view>
				</view>
				<van-empty description="此处空空如也哦!" v-if="!outline.length" />
			</van-tab>
		</van-tabs>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import $http from '../../request/index.js'
	import {
		onShow
	} from '@dcloudio/uni-app'
	let active = ref('领养成功')
	let waite = ref('')
	let finish = ref('')
	let outline = ref('')
	onShow(() => {
		$http.get('/user/mysend').then(res => {
			console.log(res)
			finish.value = res.data.filter(i => i.petsendState == 1)
			waite.value = res.data.filter(i => i.petsendState == 0)
			outline.value = res.data.filter(i => i.petsendState == 2)
		})
	})

	function info(id) {
		console.log(id)
		uni.navigateTo({
			url: '/pages/petinfo/petinfo?petId=' + id
		})
	}
</script>

<style scoped>
	.plan {
		margin: 20rpx 0 10rpx 0;
	}

	.bottom {
		width: 300rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.name {
		font-size: 34rpx;
		font-weight: bolder;
	}

	.age {
		font-size: 28rpx;
	}

	.top {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100vw;
		height: 260rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		/* background-color: #f7f8fa; */
		/* margin: 20rpx 0; */
	}

	.middle {
		width: 100%;
		height: 130rpx;
		font-size: 24rpx;
	}

	.bigimg {
		width: 220rpx;
		height: 220rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;
	}

	.seximg {
		width: 50rpx;
		height: 50rpx;
		margin: 0 20rpx;
	}

	.right {
		width: 500rpx;
		height: 100%;
		padding-top: 20rpx;
	}

	.my-swipe .van-swipe-item {
		color: #fff;
		font-size: 20px;
		text-align: center;
		height: 150px;
	}

	img {
		width: 90vw;
		height: 100%;
	}
</style>